<template>
  <div class="mine">
    <nuxt-link
      v-if="auth.loggedIn"
      to="user/profile"
      class="mine-info"
    >
      <div class="head">
        <img
          :src="auth.user.head_portrait"
          alt=""
        >
      </div>
      <div class="info">
        <h2>{{ $t('Hi，') }}{{ auth.user.nickname }}</h2>
        <div class="uid">
          UID:{{ auth.user.id }}
        </div>
      </div>
    </nuxt-link>
    <nuxt-link
      v-else
      to="/login"
      class="mine-info"
    >
      <div style="flex-grow: 1">
        <h2>{{ $t('点击登录') }}</h2>
        <div class="uid">{{ $t('欢迎来到') }} {{ site.app_name }}</div>
      </div>
    </nuxt-link>
    <ul>
      <!-- <li>
        <a @click="handleLink('/starship/myStar')">
          <i class="iconfont icon-liwu"></i>
          <p>{{ $t('矿机列表') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li> -->
      <li>
        <nuxt-link to="/user/service">
          <i class="iconfont icon-kefu"></i>
          <p>{{ $t('联系客服') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </nuxt-link>
      </li>
      <li>
        <a @click="handleLink('/user/certification')">
          <i class="iconfont icon-icon_huabanfuben"></i>
          <p>{{ $t('实名认证') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <a @click="handleLink('/user/referral-code')">
          <i class="iconfont icon-liwu"></i>
          <p>{{ $t('我的推荐') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <a @click="handleLink('/user/notice')">
          <i class="iconfont icon-xiaoxi"></i>
          <p>{{ $t('系统消息') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <nuxt-link to="/user/setting">
          <i class="iconfont icon-shezhi"></i>
          <p>{{ $t('系统设置') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </nuxt-link>
      </li>
    </ul>
    <ul>
      <!-- <li>
        <a @click="handleLink('/starship/myStar')">
          <i class="iconfont icon-mima"></i>
          <p>{{ $t('锁仓') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li> -->
      <li>
        <a @click="handleLink('/fund')">
          <i class="iconfont icon-zhanghuzichan"></i>
          <p>{{ $t('我的资产') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <a @click="handleLink('/fund/draw_addr')">
          <i class="iconfont icon-dizhi"></i>
          <p>{{ $t('提币地址') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <a @click="handleLink('/otc/pay')">
          <i class="iconfont icon-caidan-tianchong"></i>
          <p>{{ $t('收款方式') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <a @click="handleLink('/otc/order-status')">
          <i class="iconfont icon-jiaoyimingxi"></i>
          <p>{{ $t('OTC交易订单') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <a @click="handleLink('/exchange/bills')">
          <i class="iconfont icon-jiaoyimingxi"></i>
          <p>{{ $t('转账明细') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
    </ul>
    <ul class="bottom">
      <li>
        <a @click="handleLink('/user/security')">
          <i class="iconfont icon-mima"></i>
          <p>{{ $t('安全中心') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </a>
      </li>
      <li>
        <nuxt-link to="/user/about">
          <i class="iconfont icon-guanyu"></i>
          <p>{{ $t('关于我们') }}</p>
          <i class="iconfont icon-jiantouarrow487"></i>
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState({
      auth: ({ auth }) => auth,
      site: ({ initInfo }) => initInfo.site
    })
  },
  beforeMount () {
    this.getUserInfo()
      .catch(() => console.log('未登录'))
  },
  methods: {
    ...mapActions({
      getUserInfo: 'auth/getUserInfo'
    }),
    handleLink (path) {
      if (this.auth.loggedIn) {
        this.$router.push(path)
      } else {
        this.$router.push('/login')
      }
    }
  },
  head () {
    return {
      title: this.$t('我的')
    }
  }
}
</script>
